<template>
  <van-nav-bar title="种草推荐" left-arrow @click-left="router.back()">
    <template #right>
      <van-icon name="add-o" />
    </template>
  </van-nav-bar>
  <div class="list">
    <van-list
      finished-text="没有更多数据了！ 别划了"
      :finished="finished"
      v-model:loading="loading"
      @load="onLoad"
      :offset="10"
    >
      <div
        class="comments-item"
        v-for="(item, index) in commentsList"
        :key="item.index"
      >
        遍历种草文章{{ index }}
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { getComments } from "@/api/comment";
// 获取路由器实例
let router = useRouter();

let commentsList = ref([]);

let apiData = reactive({ limit: 10, page: 1 });

// 判断 当前 是否在加载状态
// loading 会在调用onLoad时 vant组件 帮我们改为true
let loading = ref(false);
// 是否加载完全部数据
let finished = ref(false);

// 最大页面  第一次 请求时 就赋值了
let maxPage = ref(1);

// 滚动到了底部
let onLoad = async () => {
  console.log("滚动到底部");
  // 当page  小于等于最大页码时才去
  if (apiData.page <= maxPage.value) {
    let res = await getComments(apiData);
    // 调完接口 让loading  变为false 取消加载状态
    loading.value = false;
    // 计算最大页数
    maxPage.value = Math.ceil(res.data.count / apiData.limit);
    //每次滚动到底部 让页码加一
    apiData.page++;
    // 如果有数据 push 到 种草列表
    if (res.data.list) {
      commentsList.value.push(...res.data.list);
    }
  } else {
    // 当前页码大于 最大页码 已加载完全部数据  不会再掉接口
    loading.value = false;
    finished.value = true;
  }
};
</script>

<style scoped lang="scss">
.list {
  margin-bottom: 50px;
  .comments-item {
    height: 100px;
    background-color: bisque;
    margin-bottom: 6px;
  }
}
</style>

